<template>
    <div class="pad">
        <!-- search start -->
        <searchBar
                placeHolder="请输入车主姓名"
                @handleSearch="init"
        />
        <!-- search end -->
        <!-- table start -->
        <tableDataEl
                :page.sync="page"
                :pageSize.sync="pageSize"
                :tableData="tableData.list"
                :tableLabel="tableLabel"
                v-loading="loading"
                :pageCount.sync="tableData.rows"
                @handleDetail="handleDetail"
        />
        <!-- table end -->
        <!-- dialog start -->
        <el-dialog
                :visible.sync="isShowDialog"
                center
                title="详情"
                width="38%"
                v-el-drag-dialog
        >
            <el-form label-width='80px' label-position="left" v-loading="detailLoading" class="showImage">
                <el-form-item label="保单图片:">
                    <img v-for='(item,index) of detailImages' :src="item" class="detailImg" :key="index"/>
                </el-form-item>
                <el-form-item label="投保时间:">
                    {{detailData.start_time}} —— {{detailData.end_time}}
                </el-form-item>
                <el-form-item label="投保险种:">
                    {{name_price.type}}
                </el-form-item>
                <el-form-item label="投保金额:">
                    {{name_price.value}}
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    export default {
        name: "throughdownList",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '车主姓名',
                        prop: 'name'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: ' 车型',
                        prop: 'car_type'
                    },
                    {
                        label: '保单号',
                        prop: 'policy_num'
                    },
                    {
                        label: '保险公司名称',
                        prop: 'company'
                    },
                    {
                        label: '保单总金额',
                        prop: 'total'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    },
                    {
                        label: '审核时间',
                        prop: 'audit_time'
                    },
                    {
                        label: '审核人',
                        prop: 'audit_person'
                    }
                ],
                loading: false,
                detailData: {},
                detailLoading: false,
                isShowDialog: false,
                detailImages: [],
                name_price: {}
            }
        },
        methods: {
            async init ( search = '' ) {
                this.loading = true;
                let paramsStr = {page: this.page,pageSize: this.pageSize, key: search['search']};
                let res = await this.api.log_owenr_passList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail (...value) { //详情
                this.isShowDialog = true;
                this.detailLoading = true;
                let res = await this.api.owner_getPolicyDetail({id: value[1]['id']});
                if( res.code ) {
                    this.detailData = res.data;
                    this.detailImages = res.data.pc_img;
                    this.name_price = res.data.name_price[0];
                    setTimeout(() => {
                        new Viewer(document.querySelector(".showImage"),{})
                    }, 200);
                    this.detailLoading = false
                }else this.$message(res.msg);

            }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }

    }
</script>

<style scoped>
    .pad {
        padding: 10px;
    }
    .detailImg {
        width:100px;
        margin-right:5px;
    }
    .showImage img {
        cursor:pointer;
    }
    .pad >>> .viewer-container {z-index:8000;}
</style>
